@use '@scss/common' as *;

.drawerToggler {
  all: unset;
  cursor: pointer;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  transition: opacity var(--duration) ease;
  outline: 1px solid;
  border-radius: 50%;

  &:hover {
    opacity: 1;
  }
}

.tableWithDrawer {
  width: 100%;
  overflow: auto;

  :global {
    table {
      margin-bottom: 1rem;
      overflow: auto;
      max-width: 100%;
      width: 100%;
      border-spacing: 0px;
      border-collapse: collapse;

      thead {
        color: var(--theme-elevation-500);

        th {
          font-weight: normal;
          text-align: left;
        }
      }

      th,
      td {
        padding: 0.75rem;
        min-width: 150px;
        vertical-align: top;
      }

      tbody {
        tr {
          &:nth-child(odd) {
            background: var(--theme-elevation-100);
          }
        }
      }

      @include mid-break {
        th,
        td {
          max-width: 70vw;
          padding: 0.5rem;
        }
      }
    }
  }

  @include mid-break {
    margin-left: calc(var(--gutter-h) * -1);
    margin-right: calc(var(--gutter-h) * -1);
    padding-left: calc(var(--gutter-h) * 0.5);
    padding-right: calc(var(--gutter-h) * 0.5);
    width: calc(100% + (var(--gutter-h) * 2));
    max-width: calc(100% + (var(--gutter-h) * 2));
  }
}

.mdxDrawer {
  :global {
    table {
      tbody {
        tr {
          &:nth-child(odd) {
            background: var(--theme-elevation-150);
          }
        }
      }
    }
  }
}
